<template>
  <div class="video-test-container">
    <h1 class="title">视频播放器测试页面</h1>
    <div class="video-area">
      <VideoPlayer
        title="视频播放测试"
        :handle-ws-message="handleWsMessage"
        :video-ele-list="videoEleList"
        ref="videoPlayerRef"
      />
    </div>
    <div class="control-panel">
      <el-space>
        <el-button type="primary" @click="refreshVideos">刷新监控列表</el-button>
        <el-button @click="sendMockSensorData">发送模拟传感器数据</el-button>
        <el-button @click="goBack">返回首页</el-button>
      </el-space>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import VideoPlayer from '@/components/VideoPlayer.vue'

// 获取路由实例
const router = useRouter()

// 创建视频播放器引用
const videoPlayerRef = ref()

// 定义视频配置元素列表
const videoEleList = ref([
  {
    ItemVisible: true,
    VisibleType: '实时数据',
    VisibleList: '实时数据;最大值;最小值',
    ItemValue: 'w01001',
    ItemName: 'pH值'
  },
  {
    ItemVisible: true,
    VisibleType: '实时数据',
    VisibleList: '实时数据;平均值',
    ItemValue: 'w01009',
    ItemName: '溶解氧'
  }
])

// 模拟WebSocket消息处理
const handleWsMessage = (message: any) => {
  console.log('收到WebSocket消息：', message)
  
  // 如果有传感器数据，处理它
  if (message && message.type === 'sensorData') {
    videoPlayerRef.value?.processSensorData(message.data)
  }
}

// 刷新监控列表
const refreshVideos = () => {
  if (videoPlayerRef.value) {
    videoPlayerRef.value.refreshCameras()
  }
}

// 模拟传感器数据
const sendMockSensorData = () => {
  // 模拟传感器数据
  const mockData = {
    MN: '123456789', // 假设这是与某个监控点关联的传感器MN
    CP: {
      'w01001-Rtd': 7.2,
      'w01001-Max': 8.0,
      'w01001-Min': 6.5,
      'w01009-Rtd': 5.6,
      'w01009-Avg': 5.2
    }
  }
  
  // 处理模拟数据
  videoPlayerRef.value?.processSensorData(mockData)
}

// 返回首页
const goBack = () => {
  router.push('/')
}

// 模拟WebSocket连接
let mockWsInterval: number | null = null

onMounted(() => {
  // 模拟每30秒发送一次传感器数据
  mockWsInterval = window.setInterval(() => {
    // 生成随机数据
    const randomData = {
      MN: '123456789',
      CP: {
        'w01001-Rtd': 6.8 + Math.random(),
        'w01001-Max': 8.0,
        'w01001-Min': 6.5,
        'w01009-Rtd': 5.0 + Math.random(),
        'w01009-Avg': 5.2
      }
    }
    
    // 处理随机数据
    videoPlayerRef.value?.processSensorData(randomData)
  }, 30000)
})

onUnmounted(() => {
  // 清除定时器
  if (mockWsInterval) {
    clearInterval(mockWsInterval)
  }
})
</script>

<style scoped lang="scss">
.video-test-container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 20px;
  box-sizing: border-box;
  background: #f0f2f5;
}

.title {
  margin-bottom: 20px;
  color: #333;
  font-size: 24px;
}

.video-area {
  flex: 1;
  min-height: 500px;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 20px;
}

.control-panel {
  padding: 15px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}
</style> 